{% extends "index.html" %}

{% block stylesheet %}{{ base_url }}/css/football_scores/extension.css{% endblock %}

{% block content %}
<script type="text/javascript">

/* Extend jQuery with functions for PUT and DELETE requests. */

function _ajax_request(url, data, callback, type, method){
    if (jQuery.isFunction(data)) {
        callback = data;
        data = {};
    }
    return jQuery.ajax({
        type: method,
        url: url,
        data: data,
        success: callback,
        dataType: type
    });
}

jQuery.extend({
    put: function(url, data, callback, type){
        return _ajax_request(url, data, callback, type, 'PUT');
    },
    delete_: function(url, data, callback, type){
        return _ajax_request(url, data, callback, type, 'DELETE');
    }
});

function add_team_to_user(li){
    var team;
    if (li == null) {
        team = $("#team-to-add").val();
    }
    else {
        team = li.childNodes[0].data;
    }
    
    var url = "{{ base_url }}/football_scores/team/" + team + "/";
    
    $.put(url, '', function(json){
        if (json.team == "error") {
            var message = $('<div id="dialog">' + json.message + '</div>');
            message.hide();
            message.dialog({
                title: "Error adding team",
                buttons: {
                    Close: function(){
                        $(this).dialog('destroy');
                    }
                },
                modal: "true"
            });
            message.fadeIn("slow");
        }
        else {
            show_team_selected(json.team);
        }
    }, 'json');
}

function show_team_selected(team){
    if (team.scorer) {
       var im_goal = "<img id='im_goal' src='{{ base_url }}/img/football_scores/goal_grey.png' />";
       var im_player = "<img id='im_player' src='{{ base_url }}/img/football_scores/player.png' />";
       var im_clock = "<img id='im_clock' src='{{ base_url }}/img/football_scores/clock_grey.png' />";
    }
    else if (team.final_score) {
       var im_goal = "<img id='im_goal' src='{{ base_url }}/img/football_scores/goal_grey.png' />";
       var im_player = "<img id='im_player' src='{{ base_url }}/img/football_scores/player_grey.png' />";
       var im_clock = "<img id='im_clock' src='{{ base_url }}/img/football_scores/clock.png' />";
    }
    else {
       var im_goal = "<img id='im_goal' src='{{ base_url }}/img/football_scores/goal.png' />";
       var im_player = "<img id='im_player' src='{{ base_url }}/img/football_scores/player_grey.png' />";
       var im_clock = "<img id='im_clock' src='{{ base_url }}/img/football_scores/clock_grey.png' />";
    };
    var table_line = "<table width='100%'><tr><td id='team_name' onclick='del_team_from_user(this);' width='40%'>" + team.name + "</td><td id='team_goal' onclick='show_team_prefs(this);' width='20%'>" + im_goal + "</td><td id='team_player' onclick='show_team_prefs(this);' width='20%'>" + im_player + "</td><td id='team_clock' onclick='show_team_prefs(this);' width='20%'>" + im_clock + "</td></tr></table>";
    var newLi = $('<div id="teams-selected-entry">' + table_line +'</div>');
    $("#teams-selected").prepend(newLi);
}

function show_team_prefs(td){
    var row = $(td).closest('tr');
    var team_str = row.children()[0].firstChild;
    var selector = $('<select id="pref_chosen"><option value="goal">Just the goal</option><option value="scorer">Goal with scorer</option><option value="score">Just the final score</option></select>');
    var window = $('<div id="dialog"></div>');
    window.html(selector);
    window.dialog({
        title: team_str.data + " preferences",
        width: 650,
        maxHeight: 650,
        buttons: {
           Save: function(){
               $.post("{{ base_url }}/football_scores/properties/" + team_str.data + '/', { 'prop': this.firstChild.value },
                      function(data){
                          show_team_selected(data);
                      }, "json"
               );
               row.closest('table').hide('slow');
               $(this).dialog('destroy');
           }
        },
        modal: "true"
    });
    window.fadeIn("slow");
}

function del_team_from_user(li){
    var team = li.childNodes[0].data;
    var url = "{{ base_url }}/football_scores/team/" + team + "/";
    
    var message = $('<div id="dialog"> Are you sure you want to delete <b>' + team + '</b> from your list of teams?</div>');
    message.hide();
    message.dialog({
        title: "Confirmation",
        buttons: {
            No: function(){
                $(this).dialog('destroy');
            },
            Yes: function(){
                $.delete_(url, '', function(json){
                    $(li).closest('table').css('background', 'red').fadeOut("slow");
                }, 'json');
                $(this).dialog('destroy');
            }
        },
        modal: "true"
    });
    message.fadeIn("slow");
}


function get_selected_teams(){
    var url = "{{ base_url }}/football_scores/team/";
    var tmp = [];
    
    $("#teams-selected").hide();
    $.getJSON(url, function(json){
        $.each(json.list_teams, function(i, item){
            tmp.push(item);
        });
        tmp = tmp.sort();
        for (var i = 0; i < tmp.length; i++) {
            show_team_selected(tmp[i]);
        };
        $("#teams-selected").show("slow");
    });
}


function get_countries(reload){
    if (!reload) {
        $("#back").html('');
        $("#list-of-leagues").hide();
        $("#list-of-countries").show("slow");
    }
    else {
        var url = "{{ base_url }}/football_scores/country/";
        var tmp = [];
        
        $.getJSON(url, function(json){
            $("#title-to-select").html('<h2>Countries</h2>');
            $("#list-of-countries").hide();
            $.each(json.list_countries, function(i, item){
                  tmp.push(item);
            });
            tmp = tmp.sort();
            for (var i = 0; i < tmp.length; i++) {
                var newLi = '<div id="list-others-entry" onclick="get_leagues_of_country(this);">' + tmp[i] + '</div>';
                  	$("#list-of-countries").append(newLi);
            };
            $("#list-of-countries").show("slow");
        });
    }
}


function get_leagues_of_country(li){
    if (li == null) {
        $("#list-of-teams").hide();
        $("#back").html('<h4 onclick="get_countries()";>back to countries</h4>');
        $("#list-of-leagues").show("slow");
    }
    else {
        var country = li.childNodes[0].data;
        var url = "{{ base_url }}/football_scores/country/" + country + "/";
		var tmp = [];
        
        $.getJSON(url, function(json){
            $("#back").html('<h4 onclick="get_countries()";>back to countries</h4>');
            $("#list-of-countries").hide();
            $("#title-to-select").html('<h2>Leagues</h2>');
            $("#list-of-leagues").empty();
            $("#list-of-leagues").hide();
            $.each(json.list_leagues, function(i, item){
			tmp.push(item);
            });
		tmp = tmp.sort();
		for (var i=0; i<tmp.length; i++) {
                var newLi = '<div id="list-others-entry" onclick="get_teams_of_league(this);">' + tmp[i] + '</id>';
                $("#list-of-leagues").append(newLi);	
		};
            $("#list-of-leagues").show("slow");
        });
    }
}


function get_teams_of_league(li){
    var league = li.childNodes[0].data;
    var url = "{{ base_url }}/football_scores/league/" + league + "/";
    var tmp = [];
    
    $.getJSON(url, function(json){
        $("#list-of-leagues").hide();
        $("#back").html('<h4 onclick="get_leagues_of_country()";>back to leagues</h4>');
        $("#title-to-select").html('<h2>Teams</h2>');
        $("#list-of-teams").empty();
        $("#list-of-teams").hide();
        $.each(json.list_teams, function(i, item){
		tmp.push(item);
        });
	  tmp = tmp.sort();
	  for (var i=0; i<tmp.length; i++) {
            var newLi = '<div id="list-others-entry" onclick="add_team_to_user(this);">' + tmp[i] + '</div>';
			$("#list-of-teams").append(newLi);
		};
        $("#list-of-teams").show("slow");
    });
}


$(document).ready(function(){
    get_selected_teams();
    get_countries(true);
});

</script>

<div id="extension">

  <div id="extension-selected">

    <div class="title">
      <h2>Teams Chosen</h2>
    </div>
    
    <div id="teams-selected">
    </div>

    <div id="form-team">
      <div class="text">
	<label for="team">Team</label>
	<input type="text" name="team" id="team-to-add">
      </div>
      <input type="button" onclick="add_team_to_user();" value="Add team"/>
    </div>

  </div>
  
  <div id="extension-others">

    <div class="title" id="title-to-select">
    </div>

    <div id="back">
    </div>

    <div id="list-of-countries">
    </div>

    <div id="list-of-leagues">
    </div>

    <div id="list-of-teams">
    </div>
  </div>
</div>

{% endblock %}
